<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

// 从 localStorage 加载任务（与主界面数据同步）
const tasks = ref(JSON.parse(localStorage.getItem('tasks')) || [])
const router = useRouter()
const filterDate = ref('all') // 时间筛选：all/week/month

// 🔍 筛选：仅显示「已完成 + 有完成时间」的任务
const completedTasks = computed(() => {
  return tasks.value.filter(task => task.completed && task.completedAt)
})

// 📊 计算：过滤 + 排序后的任务列表
const filteredTasks = computed(() => {
  let list = [...completedTasks.value]

  // 1. 按完成时间倒序（最新完成在前）
  list.sort((a, b) => {
    const dateA = new Date(a.completedAt)
    const dateB = new Date(b.completedAt)
    return dateB - dateA
  })

  // 2. 时间范围筛选
  const now = new Date()
  if (filterDate.value === 'week') {
    const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
    list = list.filter(task => new Date(task.completedAt) > oneWeekAgo)
  } else if (filterDate.value === 'month') {
    const oneMonthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
    list = list.filter(task => new Date(task.completedAt) > oneMonthAgo)
  }

  return list
})

// 🚀 跳转任务详情（需配置路由：/task/:id）
const viewTaskDetail = (taskId) => {
  router.push(`/task/${taskId}`)
}
</script>

<template>
  <div class="history-page">
    <!-- 标题 -->
    <h2 class="page-title">历史记录</h2>

    <!-- 筛选栏（与主界面风格统一） -->
    <div class="filter-bar">
      <select v-model="filterDate" class="filter-select">
        <option value="all">所有时间</option>
        <option value="week">最近一周</option>
        <option value="month">最近一个月</option>
      </select>
    </div>

    <!-- 任务列表（空状态优化） -->
    <div class="task-list">
      <template v-if="filteredTasks.length === 0">
        <div class="empty-state">
          <p>暂无已完成任务 ✨</p>
        </div>
      </template>
      <div 
        v-else 
        v-for="task in filteredTasks" 
        :key="task.id" 
        class="task-card"
        @click="viewTaskDetail(task.id)"
      >
        <div class="task-content">
          <h3 class="task-title line-through">{{ task.title }}</h3>
          <p class="task-meta">
            完成时间：{{ new Date(task.completedAt).toLocaleString() }}
          </p>
          <p class="task-description">{{ task.description || '无描述' }}</p>
        </div>
        <span class="detail-link">查看详情</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 继承主界面的设计系统变量 */
.history-page {
  min-height: 100vh;
  background-color: var(--gray-50);
  font-family: 'Inter', system-ui, sans-serif;
  padding: 2rem;
}

/* 标题样式 */
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 1.5rem;
}

/* 筛选栏 */
.filter-bar {
  margin-bottom: 1rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:hover {
  border-color: var(--primary-color);
}

/* 任务列表 */
.task-list {
  display: grid;
  gap: 1.5rem;
}

.task-card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: var(--card-shadow);
  transition: all 0.2s ease;
  padding: 1.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover-shadow);
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.task-meta {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.task-description {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
  max-height: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detail-link {
  font-size: 0.85rem;
  color: var(--primary-color);
  margin-left: 1rem;
}

/* 空状态 */
.empty-state {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: var(--card-shadow);
  padding: 2rem;
  text-align: center;
  color: var(--gray-500);
}

/* 已完成任务样式 */
.line-through {
  text-decoration: line-through;
  opacity: 0.8;
}
</style>